<template>
  <div>
    <div class="app-container">
      <div class="search-container">
        <table style="padding: auto;margin-left: 30%;width: 50%;">
          &nbsp;
          <tr>
            <td>姓名:</td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <td>
              {{ personalMessage.nickName }}
            </td>
          </tr>
          &nbsp;&nbsp;
          <tr>
            <td>性别:</td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <td>{{ personalMessage.sex == true ? '男' : '女' }}</td>
          </tr>
          &nbsp;&nbsp;
          <tr>
            <td>手机号:</td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <td>{{ personalMessage.phone }}</td>
          </tr>
          &nbsp;&nbsp;
          <tr>
            <td>证件类型:</td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <td>
              <span v-if="personalMessage.cardType == 1">身份证</span>
              <span v-if="personalMessage.cardType == 2">护照</span>
              <span v-if="personalMessage.cardType == 3">港澳通行证</span>
              <span v-if="personalMessage.cardType == 4">台湾通行证</span>
              <span v-if="personalMessage.cardType == 5">回乡证</span>
              <span v-if="personalMessage.cardType == 6">台胞证</span>
              <span v-if="personalMessage.cardType == 7">其他</span>
            </td>
          </tr>
          &nbsp;&nbsp;
          <tr>
            <td>证件号码:</td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <td>{{ personalMessage.cardNumber }}</td>
          </tr>
          &nbsp;&nbsp;
          <tr>
            <td>电子邮箱:</td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <td>{{ personalMessage.email }}</td>
          </tr>
          &nbsp;&nbsp;
          <tr>
            <td>学历:</td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <td>{{ personalMessage.educationBackground }}</td>
          </tr>
          &nbsp;&nbsp;
          <tr>
            <td>毕业院校:</td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <td>{{ personalMessage.graduateInstitutions }}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { userInfo } from 'os';
import { ref, reactive, onMounted } from 'vue'
import { getPersonalMessage } from '@/api/PersonalSettings/index'

const search = reactive({
  uid: 1
})

const personalMessage = ref([])
const getPersonalMessages = (uid: number) => {
  getPersonalMessage(uid).then((res): any => {
    personalMessage.value = res.data
    console.log(res)
  })
}

//生命周期钩子
onMounted(() => {
  getPersonalMessages(1)
})
</script>